<template>
    <div>
        <div align="right" style="margin-bottom: 20px">
            <el-button type="primary" size="mini" @click="backHome">返回主页</el-button>
        </div>
        <el-row>
            <el-col :span="15">
                <div class="details_title">环境查看</div>
            </el-col>
            <el-col :span="9">
                <el-select v-model="soilName">
                    <el-option v-for="item in soilOption"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-divider></el-divider>

        <el-row style="margin-bottom: 20px">
            <el-col :span="6">
                <div class="son_title">环境图表</div>
            </el-col>
            <el-col :span="7">
                <el-date-picker v-model="barChartDate" size="mini"></el-date-picker>
            </el-col>
            <el-col :span="7">
                <el-time-picker
                        v-model="submitTime"
                        size="mini">
                </el-time-picker>
            </el-col>
            <el-col :span="4">
                <el-button size="mini" @click="getChartsData">查询</el-button>
            </el-col>
        </el-row>
        <div id="lot_charts"></div>
        <el-divider></el-divider>

    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "lot-charts",
        data() {
            return {
                soilName: '',
                soilOption: [{
                    value: '12354',
                    label: '12354'
                }],
                barChartDate: new Date(2020,6,15,0,0,0),
                compareForDateDateValue: new Date(),
                option: {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        type: 'scroll',
                        data: [],
                        // axisLabel : {
                        textStyle: {
                            color: 'black',
                        }
                        // }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [],
                        axisLabel: {
                            textStyle: {
                                color: 'black',
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: 'black',
                            }
                        }
                    },
                    series: []
                },
                submitTime: new Date(),
                rateChart:''
            }
        },
        computed:{
            getSeries(){
                return this.option.series;
            }
        },
        watch:{
            getSeries(){
                this.initLOT()
            }
        },
        mounted() {
            this.getCropId()
            this.getChartsData();
        },
        methods: {
            /**     从后台获取地块id     **/
            getCropId() {
                let _this = this;
                this.$http.get('gengyun/indicator/getCropRotationId').then((res) => {
                    let soilId = res.data.stringListMap;
                    console.log(soilId)
                    let length = soilId.length;
                    let soil = {
                        value: '',
                        label: ''
                    };
                    for (let i = 0; i < length; i++) {
                        soil.value = soilId[i];
                        soil.label = soilId[i];
                        // _this.$set(_this.soilOption , i , soil);
                        _this.soilOption[i] = soil
                        soil = {
                            value: '',
                            label: ''
                        }
                    }
                    console.log(soil)
                    _this.soilName = _this.soilOption[0].value
                }).catch((error) => {
                    console.log(error)
                });
            },
            /**     获取图表数据     **/
            getChartsData() {
                setTimeout(() => {
                    let _this = this;
                    let form = new FormData;
                    form.append('cropId',this.soilName);
                    form.append('date', this.barChartDate.toLocaleDateString());
                    form.append('time',this.submitTime.getHours().toString())
                    form.append('indicatorType', '环境指标');
                    this.$http.post("gengyun/soilconditionhourly/listByIdAndTime", form).then((res) => {
                        let lots = res.data.getLOT;
                        console.log(lots)
                        for (let i in lots){
                            if(lots.hasOwnProperty(i)){
                                let series = {
                                    name: '',
                                    type: 'line',
                                    data:[]
                                };
                                series.name = lots[i].targetName;
                                series.data = lots[i].targetValue;
                                _this.option.legend.data[i] = lots[i].targetName;
                                _this.$set(_this.option.series,i,series)
                            }
                        }
                    }).catch((error) => {
                    })
                },100);
            },
            /**     获取加载数据     **/
            initLOT() {
                let time = new Date();
                let nowHour = time.getHours();
                let nowHours = [];
                for (let i = 0; i < 5; i++) {
                    nowHours[i] = nowHour - 7 + i;
                }
                let myChart = echarts.init(document.getElementById('lot_charts'));
                this.rateChart = myChart;
                this.option.xAxis.data = nowHours;
                myChart.setOption(this.option,false,true)
            },
            /**     回主页     **/
            backHome() {
                this.$router.push('/home/bar')
            }
        }
    }
</script>

<style scoped>
    #lot_charts {
        height: 500px;
    }
</style>
